<template>
  <div class="create-component-list">
    <a-tabs type="card" v-model:activeKey="leftActivaPanel" :animated="true">
      <a-tab-pane key="text" tab="文字">
        <div
          class="create-component-list-item"
          v-for="(item, index) in list"
          :key="index"
          @click="onItemClick(item)"
        >
          <l-text v-if="typeof item === 'object'" v-bind="item"></l-text>
        </div>
      </a-tab-pane>
      <a-tab-pane key="image" tab="图片">
        <div class="create-component-list-item" @click="clickUploader">
          <styled-uploader
            ref="uploaderRef"
            @file-uploaded="(uploaded: UploadResp) => handleFileUploaded(uploaded)"
          ></styled-uploader>
        </div>
      </a-tab-pane>
      <a-tab-pane key="shape" tab="形状">
        <div
          class="create-component-list-item"
          v-for="(item, index) in slist"
          :key="index"
          @click="onItemClick(item)"
        >
          <l-shape v-if="typeof item === 'object'" v-bind="item"></l-shape>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, ref } from "vue";
import LText from "./LText.vue";
import LShape from "./LShape.vue";
import StyledUploader from "./StyledUploader.vue";
import { getImageDimensions, UploadImgProps } from "@/helper";
import { Tabs as aTabs, TabPane as aTabPane } from "ant-design-vue";
import { ComponentData } from "@/store/editor";
import {
  imageDefaultProps,
  ShapeComponentProps,
  shapeDefaultProps,
  TextComponentProps,
  textDefaultProps,
} from "@/defaultProps";
import { v4 as uuidv4 } from "uuid";
import { message } from "ant-design-vue";
import { UploadResp } from "@/extraType";

type LeftTabType = "text" | "image" | "shape";
const leftActivaPanel = ref<LeftTabType>("text");

const props = defineProps<{
  list: TextComponentProps[];
  slist: ShapeComponentProps[];
}>();

const emit = defineEmits(["on-item-click"]);
const uploaderRef = ref();
const onItemClick = (props: Partial<TextComponentProps & ShapeComponentProps>) => {
  //如果 props 是TextComponentProps类型
  if('text' === leftActivaPanel.value){
    const componentData: ComponentData = {
      name: "l-text",
      id: uuidv4(),
      props: {
        ...textDefaultProps,
        ...props,
      },
    };
    emit("on-item-click", componentData);
  }
  if('shape' === leftActivaPanel.value){
    const componentData: ComponentData = {
      name: "l-shape",
      id: uuidv4(),
      props: {
        ...shapeDefaultProps,
        ...props,
      },
    };
    emit("on-item-click", componentData);
  }
 
};


//服务器返回
const handleFileUploaded = (res: UploadResp) => {
  const componentData: ComponentData = {
    name: "l-image",
    id: uuidv4(),
    props: {
      ...imageDefaultProps,
    },
  };
  message.success("上传成功");
  componentData.props.src = res.data?.url;
  if (componentData.props.src) {
    getImageDimensions(componentData.props.src).then(({ width }) => {
      console.log("comlist getImageDimensions", width);
      const maxWidth = 373;
      componentData.props.width = (width > maxWidth ? maxWidth : width) + "px";
      emit("on-item-click", componentData);
    });
  }
};

const clickUploader = () => {
  uploaderRef.value.triggerUpload();
};
</script>
<style scoped lang="less">
.create-component-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  .create-component-list-item {
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    transition: all 0.3s;
  }
  .create-component-list-item:hover {
    background: #e6f7ff;
    cursor: pointer;
  }
  .remove-position {
    position: static !important;
  }
}

.create-component-list-item:hover ::v-deep .uploader-container {
  border: 2px dotted #1890ff;
  color: #1890ff;
}
.create-component-list-item:hover ::v-deep .uploader-container h4 {
  color: #1890ff;
}
</style>
